<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="formData" validateTrigger="bind">
			<uni-forms-item name="textName" label="键名"><uni-easyinput placeholder="键名" v-model="formData.textName" trim="both" /></uni-forms-item>
			<uni-forms-item name="title" label="说明"><uni-easyinput placeholder="说明" v-model="formData.title" trim="both" /></uni-forms-item>
			<uni-forms-item name="value" label="键值">
				<uni-easyinput placeholder="键值" v-model="formData.value" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="controlType" label="类型">
				<el-select v-model="formData.controlType" placeholder="类型">
						<el-option v-for="(item, inx) in typeSelect" :key="inx" :label="item" :value="inx">
					</el-option>
				</el-select>
			</uni-forms-item>
			<uni-forms-item name="group" label="类型分组">
				<el-select v-model="formData.group" placeholder="类型分组">
					<el-option v-for="(item, inx) in tabMenu" :key="item.id" :label="item.formTitle" :value="item.id">
					</el-option>
				</el-select>
			</uni-forms-item>
			<uni-forms-item name="values" label="选项">
				 <addItem v-model="formData.values" />
			</uni-forms-item>
			<!-- <uni-forms-item name="group" label="选项1">
				<uni-easyinput placeholder="选项" v-model="formData.options" />
				{{ formData.options }}
			</uni-forms-item> -->
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;"><button class="uni-button" style="width: 100px;">返回</button></navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
import { validator } from '../../js_sdk/validator/configs.js';
import addItem from '@/components/FormItems/addItem'
const db = uniCloud.database();
const dbCmd = db.command;
const dbCollectionName = 'configs';
const typelist={
    "string": "字符串",
    "text": "多行输入框",
    "editor": "编辑器",
    "number": "数字",
    "date": "日期",
    "time": "时间",
    "datetime": "日期时间",
    "select": "列表",
    "selects": "列表单选",
    "image": "图片",
    "images": "图片(多)",
    "file": "文件",
    "files": "多文件",
    "switch": "开关",
    "checkbox": "复选",
    "radio": "单选",
    "array": "数组",
    "keyword": "关键词"
}
function getValidator(fields) {
	let reuslt = {};
	for (let key in validator) {
		if (fields.includes(key)) {
			reuslt[key] = validator[key];
		}
	}
	return reuslt;
}

export default {
	components:{
		addItem
	},
	data() {
		return {
			tabMenu:[],
			typeSelect:typelist,
			formData: {
				textName: '',
				title: '',
				value: '',
				controlType: '',
				group: null,
				props: null,
				values: [],
				options: []
			},
			formOptions: {},
			rules: {
				...getValidator(['textName', 'title', 'value', 'controlType', 'group', 'props', 'values', 'options'])
			}
		};
	},
	onLoad(e) {
		this.initGroup()
		const id = e.id;
		this.formDataId = id;
		this.getDetail(id);
	},
	onReady() {
		
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		initGroup(){
			const db = uniCloud.database();
			db.collection('configs')
				.where({ textName: 'tab_group' })
				.get({
					getOne: true
				})
				.then(res => {
					this.tabMenu = res.result.data.options;
				});
		},
		/**
		 * 触发表单提交
		 */
		submit() {
			uni.showLoading({
				mask: true
			});
			console.log(this.formData)
			this.$refs.form
				.submit()
				.then(res => {
					this.submitForm(res);
				})
				.catch(errors => {
					uni.hideLoading();
				});
		},

		submitForm(value) {
			// 使用 clientDB 提交数据
			db.collection(dbCollectionName)
				.doc(this.formDataId)
				.update(value)
				.then(res => {
					uni.showToast({
						title: '修改成功'
					});
					this.getOpenerEventChannel().emit('refreshData');
					setTimeout(() => uni.navigateBack(), 500);
				})
				.catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					});
				})
				.finally(() => {
					uni.hideLoading();
				});
		},

		/**
		 * 获取表单数据
		 * @param {Object} id
		 */
		getDetail(id) {
			uni.showLoading({
				mask: true
			});
			db.collection(dbCollectionName)
				.doc(id)
				.field('textName,title,value,controlType,group,props,values,options')
				.get()
				.then(res => {
					const data = res.result.data[0];
					if(!data.values){
						data.values=[]
					}
					if (data) {
						this.formData = data;
					}
				})
				.catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					});
				})
				.finally(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>
